<template>
  <q-card
    class="text-white no-shadow"
    :style="{ 'background-image': background_image }"
  >
    <q-card-section>
      <div class="text-h6 text-center">采购</div>
    </q-card-section>
    <q-separator />
    <q-card-section>
      <div class="text-h3 text-weight-bolder text-center">
        <q-icon name="apartment"></q-icon>
      </div>
    </q-card-section>
    <q-card-section class="q-pa-none">
      <div class="text-h4 text-weight-bolder text-center">250元</div>
    </q-card-section>
    <q-card-section>
      <div class="text-h6 text-weight-bolder text-center">
        可以1个人到5个人用
      </div>
    </q-card-section>
    <q-card-actions vertical align="center">
      <q-btn class="text-capitalize bg-indigo-8" color="">开始体验</q-btn>
    </q-card-actions>
    <q-separator />
    <q-card-section class="text-center">获得代码 </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
withDefaults(
  defineProps<{
    background_image: string;
  }>(),
  {}
);
</script>

<style scoped></style>
